<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <!--   left 元素向左浮动
    right 元素向右浮动
    none 默认值。元素不浮动，并会显示在其在文本中出现的位置
    inherit 规定应该从父元素继承 float 属性的值-->
    <style>
        .wrapper{
            /* 开启BFC */
            overflow: hidden;
        }

        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-bottom: 10px;
            float: left;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="div1"></div>
</div>
<div class="div2"></div>

</body>
</html>